隆Hola 馃憢! Espera mientras comienza la sesi贸n.
Antes que todo, 驴c贸mo est谩n?
Visualizaci贸n de Informaci贸n
IIC2026 2020-2
Selecciones y join de datos en D3.js
Visualizaci贸n de Informaci贸n
IIC2026 2020-2
Repaso
Repaso
1. Selecciones en D3.js I
2. Selecciones en D3.js II
3. Join de datos en D3.js I
4. Join de datos en D3.js II
Selecciones
Objeto de D3.js que se comporta como una colecci贸n de elementos HTML.
d3.select()
d3.selectAll()
seleccion.select()
seleccion.selectAll()
Selecciones
d3.selectAll("rect")
.attr("y", 50)
.style("fill", "red")
.attr("x", (d, i, all) => 100 * i);
<svg>
<rect y="50" style="fill: red" x="0"></rect>
<rect y="50" style="fill: red" x="100"></rect>
<rect y="50" style="fill: red" x="200"></rect>
</svg>
Antes:
<body>
<ul></ul>
<ul></ul>
<ul></ul>
</body>
d3.selectAll("ul")
.append("li");
Despu茅s:
<body>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</body>
M煤ltiples grupos
d3.selectAll("ul");
M煤ltiples grupos
d3.selectAll("ul")
.selectAll("li");
M煤ltiples grupos
d3.selectAll("ul")
.selectAll("li");
Duda publicada
- Si yo hago un
selectAll("li")por ejemplo en verdad no va a seleccionar todos todos todos, sino que seleccionar谩 todos los que se encuentren en el primer grupo? Por lo que debo de cierta forma ir avanzando de a poco en los grupos para llegar a un elemento que puede estar muy al fondo?
seleccion.data
- Hay datos que no se le asocian elementos 鉃★笍 enter
- Hay elementos y datos que se asocian entre ellos 鉃★笍 update
- Hay elementos que no se le asocian datos 鉃★笍 exit
Update
const datos = [23, 45, 120, 64];
d3.select("#svg")
.selectAll("rect")
.data(datos);
<svg id="svg" width="400" height="250">
<rect></rect> <!-- 23 -->
<rect></rect> <!-- 45 -->
<rect></rect> <!-- 120 -->
<rect></rect> <!-- 64 -->
</svg>
Update
const datos = [23, 45, 120, 64];
const update = d3.select("#svg")
.selectAll("rect")
.data(datos);
<svg id="svg" width="400" height="250">
<rect></rect> <!-- 23 -->
<rect></rect> <!-- 45 -->
<rect></rect> <!-- 120 -->
<rect></rect> <!-- 64 -->
</svg>
Update
const datos = [23, 45, 120, 64];
const update = d3.select("#svg")
.selectAll("rect")
.data(datos);
update.attr("width", 50)
.attr("y", 0)
.attr("x", (d, i, all) => i * 100);
<svg id="svg" width="400" height="250">
<rect></rect> <!-- 23 -->
<rect></rect> <!-- 45 -->
<rect></rect> <!-- 120 -->
<rect></rect> <!-- 64 -->
</svg>
Update
const datos = [23, 45, 120, 64];
const update = d3.select("#svg")
.selectAll("rect")
.data(datos);
update.attr("width", 50)
.attr("y", 0)
.attr("x", (d, i, all) => i * 100);
<svg id="svg" width="400" height="250">
<rect width="50" y="0" x="0"></rect> <!-- 23 -->
<rect width="50" y="0" x="100"></rect> <!-- 45 -->
<rect width="50" y="0" x="200"></rect> <!-- 120 -->
<rect width="50" y="0" x="300"></rect> <!-- 64 -->
</svg>
Update
const datos = [23, 45, 120, 64];
const update = d3.select("#svg")
.selectAll("rect")
.data(datos);
update.attr("width", 50)
.attr("y", 0)
.attr("x", (d, i, all) => i * 100)
.attr("height", (d, i, all) => 2 * d);
<svg id="svg" width="400" height="250">
<rect width="50" y="0" x="0"></rect> <!-- 23 -->
<rect width="50" y="0" x="100"></rect> <!-- 45 -->
<rect width="50" y="0" x="200"></rect> <!-- 120 -->
<rect width="50" y="0" x="300"></rect> <!-- 64 -->
</svg>
Update
const datos = [23, 45, 120, 64];
const update = d3.select("#svg")
.selectAll("rect")
.data(datos);
update.attr("width", 50)
.attr("y", 0)
.attr("x", (d, i, all) => i * 100)
.attr("height", (d, i, all) => 2 * d);
<svg id="svg" width="400" height="250">
<rect width="50" y="0" x="0" height="46"></rect> <!-- 23 -->
<rect width="50" y="0" x="100" height="90"></rect> <!-- 45 -->
<rect width="50" y="0" x="200" height="240"></rect> <!-- 120 -->
<rect width="50" y="0" x="300" height="128"></rect> <!-- 64 -->
</svg>
Update
const datos = [23, 45, 120, 64];
const update = d3.select("#svg")
.selectAll("rect")
.data(datos);
update.attr("width", 50)
.attr("y", 0)
.attr("x", (d, i, all) => i * 100)
.attr("height", (d, i, all) => 2 * d);
Duda publicada
- Respecto al atributo "d" en
(d, i, all); el parametro lo reconoce como dato por ser "d" o por la posicion dentro de la funcion?
Exit
<svg id="svg" width="400" height="250">
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
</svg>
const datos = [23, 45];
d3.select("#svg")
.selectAll("rect")
.data(datos);
<svg id="svg" width="400" height="250">
<rect></rect> <!-- 23 -->
<rect></rect> <!-- 45 -->
<rect></rect> <!-- ? -->
<rect></rect> <!-- ? -->
</svg>
Exit
<svg id="svg" width="400" height="250">
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
</svg>
const datos = [23, 45];
const update = d3.select("#svg")
.selectAll("rect")
.data(datos);
update.exit().remove();
<svg id="svg" width="400" height="250">
<rect></rect> <!-- 23 -->
<rect></rect> <!-- 45 -->
<rect></rect> <!-- ? -->
<rect></rect> <!-- ? -->
</svg>
Exit
<svg id="svg" width="400" height="250">
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
</svg>
const datos = [23, 45];
const update = d3.select("#svg")
.selectAll("rect")
.data(datos);
update.exit().remove();
<svg id="svg" width="400" height="250">
<rect></rect> <!-- 23 -->
<rect></rect> <!-- 45 -->
</svg>
Enter
<svg id="svg" width="400" height="250">
</svg>
const datos = [23, 45, 120, 64];
d3.select("#svg")
.selectAll("rect")
.data(datos);
<svg id="svg" width="400" height="250">
<!-- ? -->
</svg>
Enter
<svg id="svg" width="400" height="250">
</svg>
const datos = [23, 45, 120, 64];
d3.select("#svg")
.selectAll("rect")
.data(datos)
.enter();
<svg id="svg" width="400" height="250">
<!-- ? -->
</svg>
Enter
<svg id="svg" width="400" height="250">
</svg>
const datos = [23, 45, 120, 64];
d3.select("#svg")
.selectAll("rect")
.data(datos)
.enter()
.append("rect");
<svg id="svg" width="400" height="250">
<!-- ? -->
</svg>
Enter
<svg id="svg" width="400" height="250">
</svg>
const datos = [23, 45, 120, 64];
d3.select("#svg")
.selectAll("rect")
.data(datos)
.enter()
.append("rect");
<svg id="svg" width="400" height="250">
<rect></rect> <!-- 23 -->
<rect></rect> <!-- 45 -->
<rect></rect> <!-- 120 -->
<rect></rect> <!-- 64 -->
</svg>
Enter
const datos = [23, 45, 120, 64];
d3.select("#svg")
.selectAll("rect")
.data(datos)
.enter()
.append("rect")
.attr("width", 50)
.attr("y", 0)
.attr("x", (d, i, all) => i * 100)
.attr("height", (d, i, all) => 2 * d);
<svg id="svg" width="400" height="250">
<rect></rect> <!-- 23 -->
<rect></rect> <!-- 45 -->
<rect></rect> <!-- 120 -->
<rect></rect> <!-- 64 -->
</svg>
Enter
const datos = [23, 45, 120, 64];
d3.select("#svg")
.selectAll("rect")
.data(datos)
.enter()
.append("rect")
.attr("width", 50)
.attr("y", 0)
.attr("x", (d, i, all) => i * 100)
.attr("height", (d, i, all) => 2 * d);
<svg id="svg" width="400" height="250">
<rect width="50" y="0" x="0" height="46"></rect> <!-- 23 -->
<rect width="50" y="0" x="100" height="90"></rect> <!-- 45 -->
<rect width="50" y="0" x="200" height="240"></rect> <!-- 120 -->
<rect width="50" y="0" x="300" height="128"></rect> <!-- 64 -->
</svg>
const svg = d3.select("body").append("svg");
const datos = [150, 256, 130, 0, 23, 422, 235];
svg.attr("width", 50 + datos.length * 100).attr("height", 500);
svg
.selectAll("rect")
.data(datos)
.enter()
.append("rect")
.attr("width", 50)
.attr("fill", "magenta")
.attr("height", (d) => d)
.attr("x", (_, i) => 50 + i * 100);
M茅todo join para flujo usual de data join
svg
.selectAll("rect")
.data(datos)
.join("rect");
svg
.selectAll("rect")
.data(datos)
.join(
enter => enter.append("rect"),
update => update,
exit => exit.remove()
);
Algunas aclaraciones
Algunas aclaraciones
- La vinculaci贸n entre elementos y datos mediante
dataqueda en los elementos, no en la selecci贸n misma.
Algunas aclaraciones
- La vinculaci贸n entre elementos y datos mediante
dataqueda en los elementos, no en la selecci贸n misma. - La vinculaci贸n de un elemento a un dato potencialmente se sobre escribe con m谩s llamadas a
data.
Algunas aclaraciones
- La vinculaci贸n entre elementos y datos mediante
dataqueda en los elementos, no en la selecci贸n misma. - La vinculaci贸n de un elemento a un dato potencialmente se sobre escribe con m谩s llamadas a
data. - La vinculaci贸n entre arreglo de datos se hace por grupo, en vez de a nivel de selecci贸n.
隆Visualizaci贸n del d铆a!
隆Visualizaci贸n del d铆a!
Propuesto por estudiante Fabi谩n Sep煤lveda Rivas.
(Fuente: Gapminder Tools)
隆Visualizaci贸n del d铆a!
隆Fundaci贸n Gapminder desarrolla herramienta de visualizaci贸n que contruye sobre D3!
(Fuente: Vizabi)
驴M谩s dudas?
Pr贸ximos eventos:
Ayudant铆a 4 (7 de septiembre) comenzar谩n jugando con D3.js. 隆Recomendada!
Pr贸ximos eventos:
Ayudant铆a 4 (7 de septiembre) comenzar谩n jugando con D3.js. 隆Recomendada!
Viernes 11 de septiembre (20:00) termina plazo de Hito 1.